<template>
  <div style="height: 100%;background-color: #01001C;">
    <el-container>
      <el-header>
        <p class="time">{{ times }} {{ times2 }} {{ week }}</p>
        <div class="title">庭审运维管控平台</div>
        <div class="court">
          <span class="el-dropdown-link">
            当前法庭：
          </span>
          <el-select v-model="tribunalCode" placeholder="请选择法庭" @change="handleTribunal">
            <el-option
              v-for="(item,index) in TribunalOptions"
              :key="index + 'tribunal'"
              :label="item.tribunalName"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-header>
      <el-alert
        v-if="failMessage != ''"
        :title="failMessage"
        type="error"
      />
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="total-item-inner">
                <camera :tribunal="tribunalCode" />
              </div>
            </div>
            <div class="grid-content bg-purple" style="margin-top: 25px;">
              <div class="total-item-inner" style="height:705px">
                <audio-monitor :tribunal4="tribunalCode" />
              </div>
            </div>
          </el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <!-- <div style="background-color:rgb(179,41,41);height:36px;color: #FFFFFF;">
              <p style="position: absolute;margin: 10px 19px;"><i class="el-icon-warning-outline" />检测到庭审主机不在线，请前往法庭查看</p>
            </div> -->
<!--            <div style="background-color:rgb(24, 225, 21);height:36px;color: #FFFFFF;">-->
<!--              <p style="position: absolute;margin: 10px 19px;"><i class="el-icon-warning-outline" />主机正常</p>-->
<!--            </div>-->
            <div class="grid-content bg-purple">
              <div class="total-item-inner2">
                <div class="conten">
                  <el-row>
                    <el-col :span="24">
                      <div style="text-align: center;margin: 13px;">
                        <img class="video2" src="../../assets/imgs/equipment.png"><p style="color:#FFFFFF;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;line-height: 8px;">庭审主机</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <trialHost :tribunal5="tribunalCode" />
                  </el-row>
                </div>
              </div>
              <div class="grid-content bg-purple" style="margin-top: 15px;">
                <div>
                  <!-- <video poster="../../assets/imgs/cs.jpg" style="width: 100%;height: 455px;" :src="src" /> -->
                  <videos :tribunal6="tribunalCode" />
                  <!-- <video id="videoElement" poster="../../assets/imgs/cs.jpg" autoplay controls width="100%" height="455" /> -->
                  <!-- <img
                    src="../../assets/imgs/cs.jpg"
                    style="width: 100%;height: 455px;"
                  > -->
                </div>
              </div>
              <div class="grid-content bg-purple" style="margin-top: 15px;">
                <div class="total-item-inner3">
                  <div class="conten">
                    <el-row>
                      <el-col :span="24"><img class="video" src="../../assets/imgs/hj.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">环境监测</p></el-col>
                      <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
                    </el-row>
                    <el-row v-if="cameraList.length===0">
                      <div v-for="(item,index) in cameraList" :key="index+'camerajj'" class="camerajj">
                        <div style="height: 15%;margin-top: 13px;width: 260px;border-right: 2px solid rgb(255, 255, 255);border-left: 2px solid rgb(255, 255, 255);position: absolute;" />
                        <p style="margin: 13px 0px;"> {{ item.name }} </p>
                        <p style="color:#18E115;">在线</p>
                      </div>
                    </el-row>
                    <el-row>
                      <p style="color: #999999;text-align: center;font-size: 12px;margin-top: 9%;">暂无数据</p>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="total-item-inner4">
                <powerSource :tribunal2="tribunalCode" />
              </div>
            </div>
            <div class="grid-content bg-purple">
              <div class="total-item-inner5" style="margin-top: 15px;">
                <air-conditioner :tribunal3="tribunalCode" />
                <!-- <div class="conten">
                  <el-row>
                    <el-col :span="24"><img class="video" src="../../assets/imgs/dy.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">IOT环控</p></el-col>
                    <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
                  </el-row>
                  <el-row>
                    <div v-for="(item,index) in cameraList" :key="index+'camera5'" class="camera5">
                      <p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 13px;">网络电源时序开关</p>
                      <div style="float: right;margin: 0 30px;">
                        <el-breadcrumb separator="|">
                          <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF">开</el-button></el-breadcrumb-item>
                          <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF">关</el-button></el-breadcrumb-item>
                        </el-breadcrumb>
                      </div>
                    </div>
                  </el-row>
                </div> -->
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { selectTribunalByCourtCode } from '@/api/tribunal'
import { selectTribunalMonitorStatus } from '@/api/tribunalMonitor'
import camera from './camera.vue'
import iot from './iot.vue'
import powerSource from './powerSource.vue'
import audioMonitor from './audio.vue'
import trialHost from './trialHost.vue'
import videos from './video.vue'
import airConditioner from './airconditioner'
import moment from 'moment'
export default {
  name: '',
  components: {
    camera, powerSource, iot, audioMonitor, trialHost, videos, airConditioner
  },
  data() {
    return {
      failMessage: '',
      failMessageIndex: 0,
      equipmentFailMessages: [],
      src: 'https://www-wuyi.oss-cn-hangzhou.aliyuncs.com/cs/cs2.mp4',
      week: null,
      times: null,
      times2: null,
      courtStatusList: [],
      cameraList: [{
        name: '法官摄像头',
        cStatus: 1
      }, {
        name: '原告像头',
        cStatus: 1
      }, {
        name: '被告摄像头',
        cStatus: 2
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }, {
        name: '全景摄像头',
        cStatus: 1
      }],
      TribunalOptions: [],
      courtCode: '1329B32',
      tribunalCode: null
    }
  },
  created() {
    this.selectTribunalByCourtCode()
    setInterval(this.getTribunalsMonitorStatusByCourtCode, 30000)
    setInterval(this.displayMessage, 10000)
  },
  methods: {
    getTribunalsMonitorStatusByCourtCode() {
      const param = {
        courtCode: this.courtCode
      }
      const fmtHour = moment().format('HH')
      console.log(fmtHour)
      const intHour = parseInt(fmtHour)
      if (intHour < 8 || intHour > 18) {
        return
      }

      selectTribunalMonitorStatus(param).then(res => {
        console.log(res)
        this.equipmentFailMessages = []
        const statusData = res.data
        for (let i = 0; i < statusData.length; i++) {
          const tribunal = statusData[i]
          const equipmentState = {
            power: false,
            camera: false,
            host: false,
            audio: false,
            computer: false
          }
          const tribunalEquipmentStatusList = tribunal.tribunalEquipmentStatusList
          for (let j = 0; j < tribunalEquipmentStatusList.length; j++) {
            if (tribunalEquipmentStatusList[j].equipmentType === 1) {
              equipmentState.power = tribunalEquipmentStatusList[j].status
              if (!equipmentState.power) {
                const failMsg = tribunal.tribunalName + '时序电源异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 2) {
              equipmentState.camera = tribunalEquipmentStatusList[j].status
              if (!equipmentState.camera) {
                const failMsg = tribunal.tribunalName + '摄像机异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 3) {
              equipmentState.host = tribunalEquipmentStatusList[j].status
              if (!equipmentState.host) {
                const failMsg = tribunal.tribunalName + '庭审主机异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 4) {
              equipmentState.audio = tribunalEquipmentStatusList[j].status
              if (!equipmentState.audio) {
                const failMsg = tribunal.tribunalName + '音频系统异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 5) {
              equipmentState.computer = tribunalEquipmentStatusList[j].status
              if (!equipmentState.computer) {
                const failMsg = tribunal.tribunalName + '庭审电脑异常'
                this.equipmentFailMessages.push(failMsg)
              }
            }
          }
          statusData[i].equipmentState = equipmentState
        }
        this.courtStatusList = statusData
      })
    },

    displayMessage() {
      if (this.failMessageIndex >= this.equipmentFailMessages.length) {
        this.failMessageIndex = 0
      }
      if (this.equipmentFailMessages.length === 0) {
        this.failMessageIndex = 0
        this.failMessage = ''
        return
      }
      this.failMessage = this.equipmentFailMessages[this.failMessageIndex]
      this.failMessageIndex++
    },
    handleTribunal(value) {
      this.tribunalCode = value
    },
    handleCommand(command) {
      this.$message('click on item ' + command)
    },
    interval() {
      setInterval(() => {
        // 同上
        this.getTime()
      }, 1000)
    },
    selectTribunalByCourtCode() {
      selectTribunalByCourtCode(this.courtCode).then(response => {
        this.TribunalOptions = response.data
        this.tribunalCode = this.TribunalOptions[0].id
      })
    },
    getTime() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      var h = date.getDay() - 1
      var we = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
      this.week = we[h]
      this.times = year + '年' + month + '月' + day + '日 '
      this.times2 = hour + ' : ' + minute + ' : ' + second
    }
  }
}
</script>
<style lang="scss" scoped>
  .alarm-info-bar{
    color: white;
  }
  .title1 {
    background-image: url('../../assets/imgs/title.png');
  }
 .el-header{
    // background-color: #083793;
    background-image: url('../../assets/imgs/title.png');
  }
  .title {
    width: auto;
    color: #FEFEFE;
    font-size: 30px;
    text-shadow:  0 0 10px #fff;
    text-align: center;
    line-height: 60px;
  }
  .time {
    position:absolute;
    font-size: 14px;
    margin-top: 33px;
    color: #BBDDFF;
  }
  .court {
    position: absolute;
    color: #BBDDFF;
    top: 30px;
    right: 36px;
    text-align: center;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #BBDDFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .bg-purple {
    background: #01001C;
    // background-image: linear-gradient(#1D399B,#01001C);
  }
  .bg-purple2 {
    // background: #011C53;
    // opacity: 0.7;
    background: rgb(1,28,83);
    height: 110px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .el-main {
    padding: 7px 20px;
    background: #01001F;
  }
  .total-item-inner{
          width: 100%;
          height: 248px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner5{
          width: 100%;
          height: 490px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner4{
          width: 100%;
          height: 470px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner2{
          width: 100%;
          height: 168px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .total-item-inner3{
          width: 100%;
          height: 284px;
          padding: 2px;
          background: linear-gradient(to left, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) right top no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to bottom, #00bfff, #00bfff) left bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat,
          linear-gradient(to left, #00bfff, #00bfff) right bottom no-repeat;
          background-size: 3px 13px, 18px 3px, 3px 13px, 18px 3px;
    }
    .conten{
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 30px #2243B2 inset
    }
    .bg-purple-dark {
      background: #787879;
    }
    .video{
      width: 16px;
      height: 16px;
      position: absolute;
      margin: 10px 20px;
    }
    .video2{
      position: absolute;
      width: 16px;
      height: 16px;
      margin: -3px -54px;
    }
    .cameras{
      color:#FFFFFF;
      font-size: 12px;
      width: 117px;
      height: 111px;
      background: #1D399B;
      // opacity: 0.2;
      border-radius: 4px;
      float: left;
      margin-left: 23px;
      margin-top: 15px;
    }
    .camera {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#01001C,#1D399B);
    }
    .camerajj {
      width: 260px;
      height: 64px;
      text-align: center;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-left: 35px;
      margin-top: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#1D399B,#01001C);
    }
    .camera5 {
      width: 100%;
      height: 54px;
      text-align: center;
      font-size: 4px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      // background-image: linear-gradient(to top,#1D399B,#01001C);
    }
    .camera4 {
      width: 85px;
      height: 64px;
      text-align: center;
      font-size: 4px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      // background-image: linear-gradient(to top,#1D399B,#01001C);
    }
    .camera2 {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }

    .camera3 {
      width: 46.5%;
      height: 110px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      text-align: center;
      margin-left: 25px;
      border-radius: 5px;
      // background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }

    .voiceStyle {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: #18489f;
      width: 34px;
      height: 7px;
      line-height:10px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .lowVoice {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: rgba(0, 162, 255, 0.8);
      width: 34px;
      height: 7px;
      line-height:10px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .inSound {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: #e79623;
      width: 34px;
      height: 7px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .highVoice {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: rgb(231, 77, 35);
      width: 34px;
      height: 7px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .voiceName {
      text-align: center;
      font-size: 12px;
      color: #ffffff;
      width: 100%;
      height: 10px;
      margin-top: 5px;
    }

   ::v-deep .el-input--suffix .el-input__inner {
        background: rgba(0,0,0,0);
        border-color: transparent;
        border: 1px solid rgba(0,0,0, 0);
        color: #BBDDFF;
    }
</style>
